<template>
  <div class="section01">
    <div class="section01-item" :class="{'empty': Object.keys(item).length === 0, 'nmore': !item.more}"
         v-for="(item, index) in convertSectionData(props.data, 3)" :key="index">
      <template v-if="Object.keys(item).length > 0">
        <div class="section01-item-icon">
          <img :src="item.icon" alt="">
          <span class="divide01"></span>
        </div>
        <div>
          <h3 class="section01-item-title">
            {{ item.title }}
          </h3>
          <div class="section01-item-description">
            {{ item.description }}
          </div>
          <div class="section01-item-more" :class="{'empty': !item.more}">
            <span class="more-btn" v-if="item.more" @click="to(item.more)">
              了解更多 &gt;
            </span>
            <span class="more-btn-empty" v-if="!item.more">
              &nbsp;&nbsp;
            </span>
          </div>
        </div>
      </template>
    </div>

  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {convertSectionData} from "@/utils/helper";

const props = defineProps(["data"])
const router = useRouter()
const to = (path) => router.push(path)
</script>
